<!--  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0px;
        }
        #pn
        {
            background: #e8e8e8;
            width: 600px;
            height: auto;
            margin: 0 auto;
            padding: 5px;
            font-size: 9pt;
        }
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
        .btn-slide
        {
            background: gray;
            text-decoration: none;
            text-align: center;
            width: 120px;
            height: 30px;
            padding: 10px 0 0 0;
            display: block;
            color: #FFF;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        function showdiv() {//展开函数
          document.getElementById("hpn").style.display="block";
          document.getElementById("strHref").innerHTML="收起";
          document.getElementById("strHref").href = "javascript:hidediv()";
            
        };
        function hidediv() {//收起函数
          document.getElementById("hpn").style.display="none";
          document.getElementById("strHref").innerHTML="展开";
          document.getElementById("strHref").href = "javascript:showdiv()";
        }
    </script>
</head>
<body>
    <div id="pn">
        <p>
            手机 - 商品筛选</p>
        <p>
            网络：移动4G 联通3G 电信3G</p>
        <div id="hpn" style="display: none">
            <p>
                价格：5000元以上 4000-4999 3000元以下</p>
            <p>
                特点：0元购机 防水 长待机</p>
        </div>
    </div>
    <p class="slide">
        <a href="javascript:showdiv();" id="strHref" class="btn-slide">展开</a>    <!点击按钮
    </p>
</body>
</html> --> 

<!-- 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动展开</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        
        #pn
        {
            background: #e8e8e8;
            height: 120px;
            width: auto;
            display: block;
            margin: 0 auto;
            padding: 5px;
            text-align: center;
            overflow:hidden;
        }
        .slide
        {
            padding: 10px;
            width: 960px;
            margin: 0 auto;
            background: gray;
            text-align: center;
            height: 40px;
            line-height: 40px;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
       
      
        
        //增加高度函数addH()
        var h = 0;    
        function addh(){  
        if(h<300) {
            h += 5;
            document.getElementById("pn").style.height=h+"px";
        }else{
            return;
        }
        setTimeout("addh()",30);
        }
        
       //网页加载完毕时，调用增加高度函数addH()，等待5秒钟后调用减少高度函数subh()。 
        window.onload=function(){
            addh();
            setTimeout("subh()",5000);
        }
      
      
      // 减少高度函数subH()
    
        function subh(){
           if(h>0){
               h -= 5;
               document.getElementById("pn").style.height=h+"px";
           }else{
               return;
           }
          setTimeout("subh()",30); 
        } 
    </script>
</head>
<body>
    <div id="pn">
        <h1>
            欢迎来到慕课网</h1>
        <h2>
            大幅广告</h2>
    </div>
    <p class="slide">
        慕课网欢迎你</p>
</body>
</html> -->



<!-- 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
            font-size: 9pt;
            line-height: 180%;
        }
        #pn
        {
            background: #f8f8f8;
            height: auto;
            width: 750px;
            margin: 0 auto;
            padding: 5px;
        }
        .artTitle
        {
            font-weight: bold;
            color: #3030FF;
            font-size: 11pt;
        }
        .subTitle
        {
            color: #CCC;
        }
        .content
        {
            border: 1px solid #CCC;
            display: none;
            padding: 5px;
        }
        .btm
        {
            text-align: right;
            height: 30px;
        }
        .btn
        {
            width: 80px;
            height: 20px;
            padding: 5px 3px 5px 3px;
            text-align: center;
            text-decoration: none;
            background: #f0f0f0;
            border: 1px solid #CCC;
        }
    </style>
    <script type="text/javascript">
        
        // 显示函数
        function showdiv(obj) {
          var x = obj.parentNode;
          var y = x.nextSibling;
           y.style.display="block";
           x.style.display="none";
        }

       // 隐藏函数
        function hidediv(obj) {
           var y = obj.parentNode.parentNode;
           var x = y.previousSibling;
           y.style.display="none";
           x.style.display="block";
        }

    </script>
</head>
<body>
    <div id="pn">
        <div id="art0">
            <p class="artTitle">
                Slack：团队日常沟通协作工具典范
            </p>
            <p class="subTitle">
                作者：来自网络 发表时间：2014-3-1
            </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" onclick="javascript:showdiv(this);" >全文</a></p><div class="content">
                <p>
                    现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>
                
                <p>
                    聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
                <p>
                    发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
                <p>
                    支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
                <p>
                    以#来进行快速形成话题组或者项目组。</p>
                <p>
                    良好的搜索支持。 上述虽然是Slack的特性，也是我对团队日常协作工具的要求——显然，Slack完全符合这些要求，而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解，这三个因素基本会重写很多软件和应用。</p>
                <p>
                    Slack有免费的lite版本，但收费版本似乎价格对中文用户而言略高。</p>
                <p>
                    Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办，因此基础甚好。而且从目前看，基本上会成为一个很成功的应用，所以在产品持续发展上面应该毫无问题。</p>
                <p>
                    The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p><div class="btm">
                    <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>   
                </div>
            </div>
        </div>
        <hr />
        <div id="art1">
            <p class="artTitle">
                Slack：团队日常沟通协作工具典范
            </p>
            <p class="subTitle">
                作者：来自网络 发表时间：2014-3-1
            </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" onclick="javascript:showdiv(this);" >全文</a></p><div class="content">
                <p>
                    现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>
                <p>
                    在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。</p>
                <p>
                    同时，移动端是有良好体验以满足移动办公便利性的。</p>
                <p>
                    聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
                <p>
                    发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
                <p>
                    支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
              
                <p>
                    The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p><div class="btm">
                    <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>     
                </div>
            </div>
        </div>
      
         
    </div>
</body>
</html>

 -->
<!-- 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动展开</title>
    <style type="text/css">   /*设置广告和正文的CSS样式*/
       .content{height: 100px;margin:0 auto;width:800px;}
       .part1{text-align: center;background-color: #ccc;height: 70px;padding: 10px 0;margin:0 auto;overflow:hidden}
       .part1 h2{margin:5px 0;}
       .part1 h3{margin:15px 0;}
       .part2{text-align: center;background-color: #3c3c3c;color: white;height: 30px;line-height: 30px;}
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>  
    <script type="text/javascript">
       
        //增加广告宽度函数
        var w = 0;
        function showdiv(){
            if(w==0){
                $("#part1").show();
            }
            if(w<800){
                w += 5;
                $("#part1").css({"width":w});
            }else{
                setTimeout(hidediv,1000);
                return;
            }
            setTimeout(showdiv,30);
        };
        
        $(document).ready(function(){
            showdiv();
             });
        
         function hidediv(){
            if(w>0){
                w -= 5;
                $("#part1").css({"width":w});
                // $("#part1").show();
                
            }else{
                $("#part1").hide();
                setTimeout(showdiv,1000);
                return;
            }
            setTimeout(hidediv,30);
        };
        
        
        //在网页加载完毕时，调用增加宽度函数，等待5秒钟后调用减少宽度函数。
        
        
        
        
        
        //减少广告宽度函数
       
    </script>

</head>
<body>
<div class="guanggao">
    <div class="content">
        <div id="part1" class="part1">
            <h2>欢迎来到慕课网</h2>
            <h3>大幅广告</h3>
        </div>
        <div id="part2" class="part2">慕课网欢迎你
        </div>
    </div>
</div>

</body>
</html> -->


<!--<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗购物网——网页定位导航效果</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
        }

        li {
            list-style: none;
        }

        #content {
            width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        #content h1 {
            color: #0088bb;
        }

        #content .item {
            padding: 20px;
            margin-bottom: 20px;
            border: 1px dotted #0088bb;
        }

        #content .item h2 {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #0088bb;
            margin-bottom: 10px;
        }

        #content .item li {
            display: inline;
            margin-right: 10px;
        }

        #content .item li a img {
            width: 230px;
            height: 230px;
            border: none;
        }
        #menu{
            position:fixed;
            top:100px;
            left: 50%;
            margin-left: 400px;
            width: 80px;
        }
/*请补充此处代码，让导航菜单在右侧绝对定位显示*/




        #menu ul li a {
            display: block;
            margin: 2px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }

        #menu ul li a:hover,
        #menu ul li a.current {
            color: #fff;
            background: #0088bb;
        }

        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
       $(document).ready(function(){
        $(document).scroll(function(){
            var top =$(document).scrollTop();
            var  menu =$("#menu");
            var item =$("#content").find(".item");
            var currentId ="";//当前所在的楼层;
            item.each(function(){
                var m =$(this);
                var itemtop = m.offset().top;
                if (top>itemtop - 200) {
                    currentId="#"+m.attr("id");
                }else{
                    return false;
                };
            })

            var currentLink =menu.find(".current");
            if(currentId && currentLink.attr("href")!=currentId){
                currentLink.removeClass("current");
                menu.find("[href="+currentId+"]").addClass("current");
            }

        })
       })


            //滚动条发生滚动时，要获取相应的值。
           
            //请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点


            //给相应楼层的a 设置 current，取消其他链接的current
                
</script>
</head>
<body>
<div id="menu">
<ul>
<!运用锚点，实现导航定位。-->
<!-- 

<li><a href="#item1" class="current">1F 男装</a></li>
<li><a href="#item2">2F 女装</a></li>
<li><a href="#item3">3F 美妆</a></li>
<li><a href="#item4">4F 数码</a></li>
<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>地狗购物网</h1>

<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html> --> 



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页定位导航效果扩展案例</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
            background-color: #888;
        }

        li {
            list-style: none;
        }

        #content {
            width: 1000px;
            margin: 0 auto;
            padding-top: 100px;
            padding-bottom: 300px;
        }


   /*请补充此处代码，让右侧广告正确显示*/





        #content .item img {
            position: absolute;
            top: 100px;
            left: 40px;
        }

        #content #item1 {
            background: url("http://img.mukewang.com/536c9ea800013ae610000540.jpg") no-repeat center top;
        }

        #content #item2 {
            background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
        }

        #content #item3 {
            background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
        }

        #content #item4 {
            background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;
        }

        #content #item5 {
            background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
        }

      
  /*请补充此处代码，让导航菜单在左侧绝对定位显示*/



        #menu h1 {
            color: #fff;
            font-size: 14px;
            text-align: center;
            background: #ee1111;
            line-height: 30px;
        }

        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 12px;
            color: #ccc;
            width: 160px;
            padding: 10px 20px;
            text-decoration: none;
            text-align: left;
            border-bottom: 1px dashed #999;
        }

        #menu ul li a strong {
            color: #f1f1f1;
        }

        #menu ul li a:hover,
        #menu ul li a.current {
            color: #fff;
            background: #666;
        }

        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
        $(document).ready(function () {
            $(window).scroll(function () {
                var top = $(document).scrollTop();
                var menu = $("#menu");
                var items = $("#content").find(".item");

// 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点

 
 
            });

        });
</script>
</head>
<body>
<div id="menu">
<h1>正在首发</h1>
<ul>
<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
<li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
<li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
<li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
<li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
</ul>
</div>
<div id="content">

<div id="item1" class="item">
<img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
</div>
</div>
</body>
</html>






<!-- <!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-弹出层</title>
<style type="text/css">
#close{ 
    background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat; 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    text-indent:-999em;
    }
#login{ 
    position:fixed;
    z-index:1001;
    }
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
    }
</style>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script>
function openNew(){
    //获取页面的高度和宽度
    var sWidth=document.documentElement.scrollWidth;
    var sHeight= ? ;  //获取页面的高度
    
    //获取页面的可视区域高度和宽度
    var wHeight= ?  ;     // 获取页面可视区域的高度
    var wWidth=document.documentElement.clientWidth;
            
    var oLogin=document.createElement("div");
        oLogin.id="login";
        oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
           ?      //插入创建的登陆框
    
    //获取登陆框的宽和高
    var dHeight= ?  ;   // 获取登陆框的高度
    var dWidth=  ?  ;      // 获取登陆框的宽度
        //设置登陆框的left和top
        oLogin.style.left=wWidth/2-dWidth/2+"px";
        oLogin.style.top=  ?  ;  //设置登陆框top值
    var oClose=document.getElementById("close");
    
        //点击登陆框以外的区域也可以关闭登陆框
        oClose.onclick=function()
        {
            document.body.removeChild(oLogin);
        }
}           
window.onload=function()
{
    var oBtn=document.getElementById("btnLogin");
        //点击登录按钮
        oBtn.onclick=function()
        {
            ?   //执行openNew函数
        }       
                
}   
</script>

</head>

<body>
<div id="header">
  <div class="container" id="nav">
    <h1 id="logo"><a href="/">慕课网</a></h1>
    <ul class="l" id="nav-item">
      <li> <a href="/course/list">课程</a> </li>
    </ul>
    <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
  </div>
</div>

<div id="main">
    <div class="slider-container">
      <div id="slider">
        <ul id="sliderUl">
          <li id="bg01"></li>
        </ul>
        <div id="dotBox"><span class=""></span><span class="active"></span><span class=""></span></div>
      </div>
      <div id="discripcontainer">
        <div class="discripbg"></div>
        <div class="discrip">
          <h3>换一种方式</h3>
          <h2>来学习互联网编程</h2>
          <h4>超酷的IT技术免费学习平台</h4>
          <div class="btnarea"> <a id="enterbtn" href="#">进入</a> <a id="learnmore" href="javascript:;">了解更多</a> </div>
        </div>
      </div>
    </div>     
  </div>
</body>
</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-弹出层</title>
<style type="text/css">
#close{ 
    background:url(http://img.mukewang.com/532c272100018d1600300030.jpg) no-repeat; 
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    text-indent:-999em;
    }
#mask{ 
    background-color:#ccc;
    opacity:0.5;
    filter: alpha(opacity=50); 
    position:absolute; 
    left:0;
    top:0;
    z-index:1000;
    }
#login{ 
    position:fixed;
    z-index:1001;
    }
.loginCon{ 
    position:relative; 
    width:670px;
    height:380px;
    background:url(http://img.mukewang.com/532c26ee0001ded006700380.jpg) #2A2C2E center center no-repeat;
    }
</style>
<link type="text/css" rel="stylesheet" href="style/main.css" />
<script>
function openNew(){
    //获取页面的高度和宽度
    
    

    //创建一个遮罩层，设置ID为mask

        
    //设置遮罩层的宽度和高度，使页面被完全遮罩。    
        
    
        
     //在页面里插入创建的遮罩层 
     
     
         
        
    //获取页面的可视区域高度和宽度
    
    
    //获取登陆框的宽和高
    
    
    
    //点击关闭按钮
    
    
    //点击登陆框以外的区域也可以关闭登陆框
}       
                    
    //加载后，点击登录按钮后，弹出遮罩和登录框
   
   
   
</script>
</head>

<body>
<div id="header">
  <div class="container" id="nav">
    <h1 id="logo"><a href="#">慕课网</a></h1>
    <ul class="l" id="nav-item">
      <li> <a href="#">课程</a> </li>
    </ul>
    <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
  </div>
</div>

<div id="main">
    <div class="slider-container">
      <div id="slider">
        <ul id="sliderUl">
          <li id="bg01"></li>
        </ul>
        <div paid="dotBox"><span class=""></span><span class="active"></span><span class=""></span></div>
      </div>
      <div id="discripcontainer">
        <div class="discripbg"></div>
        <div class="discrip">
          <h3>换一种方式</h3>
          <h2>来学习互联网编程</h2>
          <h4>超酷的IT技术免费学习平台</h4>
          <div class="btnarea"> <a id="enterbtn" href="#">进入</a> <a id="learnmore" href="javascript:;">了解更多</a> </div>
        </div>
      </div>
    </div>     
  </div>
</body>
</html> -->
<!-- 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
        * {
margin: 0;
padding: 0
        }

        #demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
        }

        #small-box {
position: relative;
z-index: 1;
        }

        #float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
        }

        #mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
        }

        #big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
        }

        #big-box img {
position: absolute;
z-index: 5
        }
</style>
<script>

        //页面加载完毕后执行
window.onload = function () {

varobjDemo = document.getElementById("demo");
varobjSmallBox = document.getElementById("small-box");
varobjMark = document.getElementById("mark");
varobjFloatBox = document.getElementById("float-box");
varobjBigBox = document.getElementById("big-box");
varobjBigBoxImage = objBigBox.getElementsByTagName("img")[0];

objMark.onmouseover = function () {
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
            }

objMark.onmouseout = function () {
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
            }

objMark.onmousemove = function (ev) {

//请补充此处鼠标移动时的响应方法
            }
        }
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="http://img.mukewang.com/537d77fb0001559d04000255.jpg"/>
</div>
<div id="big-box">
<img src="http://img.mukewang.com/537d781b0001c04210240654.jpg"/>
</div>
</div>
</body>
</html> -->